<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小程序原型图概览 - 退役军人服务平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #1a6df0;
            --navy-blue: #0d2b50;
            --secondary: #ff6b00;
            --light-bg: #f5f7fa;
            --white: #ffffff;
            --gray: #6c757d;
            --text-primary: #333;
            --text-secondary: #666;
            --border: #e5e5e5;
        }

        body {
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
            background: var(--light-bg);
            color: var(--text-primary);
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .header h1 {
            font-size: 28px;
            color: var(--navy-blue);
            margin-bottom: 10px;
        }

        .header p {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .section {
            margin-bottom: 40px;
        }

        .section-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--navy-blue);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary);
        }

        .page-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .page-card {
            background: var(--white);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            text-decoration: none;
            color: var(--text-primary);
            display: block;
        }

        .page-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }

        .page-preview {
            width: 100%;
            height: 520px;
            background: #e0e0e0;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page-preview iframe {
            width: 375px;
            height: 812px;
            border: 8px solid #000;
            border-radius: 20px;
            transform: scale(0.6);
            transform-origin: center;
            pointer-events: none;
            background: white;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }

        .page-preview-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--text-secondary);
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 2;
            transition: opacity 0.3s;
        }

        .page-preview.loaded .page-preview-loading {
            opacity: 0;
            pointer-events: none;
        }

        .page-preview-loading i {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .page-info {
            padding: 15px;
        }

        .page-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .page-desc {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .page-badge {
            display: inline-block;
            padding: 3px 8px;
            background: var(--primary);
            color: white;
            border-radius: 4px;
            font-size: 10px;
            margin-top: 8px;
        }

        .chat-demo {
            background: var(--white);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 40px;
        }

        .chat-demo-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--navy-blue);
        }

        .chat-messages {
            background: var(--light-bg);
            border-radius: 8px;
            padding: 20px;
            max-height: 500px;
            overflow-y: auto;
        }

        .chat-message {
            margin-bottom: 15px;
            display: flex;
            gap: 10px;
        }

        .chat-message.user {
            flex-direction: row-reverse;
        }

        .chat-avatar {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }

        .chat-message.user .chat-avatar {
            background: var(--primary);
            color: white;
        }

        .chat-message.ai .chat-avatar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .chat-content {
            max-width: 70%;
            padding: 10px 15px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.5;
        }

        .chat-message.user .chat-content {
            background: var(--primary);
            color: white;
        }

        .chat-message.ai .chat-content {
            background: var(--white);
            color: var(--text-primary);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: var(--white);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .stat-value {
            font-size: 32px;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 14px;
            color: var(--text-secondary);
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>战友部落 - 小程序原型图概览</h1>
        <p>退役军人数字生态圈 - 所有页面原型展示</p>
    </div>

    <div class="stats">
        <div class="stat-card">
            <div class="stat-value">30+</div>
            <div class="stat-label">页面总数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">4</div>
            <div class="stat-label">核心模块</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">100%</div>
            <div class="stat-label">PRD覆盖</div>
        </div>
    </div>

    <div class="chat-demo">
        <div class="chat-demo-title">
            <i class="fas fa-robot"></i> AI智能助手对话样例
        </div>
        <div class="chat-messages">
            <div class="chat-message ai">
                <div class="chat-avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="chat-content">
                    您好！我是AI智能助手，可以帮您制定旅游行程、推荐工作岗位、查询优惠政策等。
                </div>
            </div>
            <div class="chat-message user">
                <div class="chat-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="chat-content">
                    我想去北京旅游，帮我制定一个3天的行程
                </div>
            </div>
            <div class="chat-message ai">
                <div class="chat-avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="chat-content">
                    好的，我为您推荐一个北京3日游行程，包含退役军人专属优惠：
                    <br><br>
                    <strong>第一天：</strong>天安门广场（退役军人免费）→ 故宫博物院（退役军人5折优惠）→ 王府井步行街
                    <br><br>
                    <strong>第二天：</strong>八达岭长城（退役军人免费）→ 颐和园（退役军人8折优惠）
                    <br><br>
                    <strong>第三天：</strong>天坛公园（退役军人6折优惠）→ 什刹海
                    <br><br>
                    预计总费用：¥2,580/人（含住宿、交通）
                    <br><br>
                    需要我为您生成详细报价单吗？
                </div>
            </div>
            <div class="chat-message user">
                <div class="chat-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="chat-content">
                    好的，生成报价单
                </div>
            </div>
            <div class="chat-message ai">
                <div class="chat-avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="chat-content">
                    已为您生成报价单，包含详细行程安排、酒店预订信息、景点门票价格（含退役军人优惠）、交通费用。您可以在"我的参与"中查看，也可以分享给战友一起拼团，享受更多优惠！
                </div>
            </div>
        </div>
        <div style="text-align: center; margin-top: 15px;">
            <a href="ai-chat.html" style="color: var(--primary); text-decoration: none; font-size: 14px;">
                查看完整AI对话页面 <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>

    <div class="section">
        <div class="section-title">
            <i class="fas fa-home"></i> 首页模块
        </div>
        <div class="page-grid">
            <a href="home.html" class="page-card">
                <div class="page-preview">
                    <iframe src="home.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">首页 - 数字哨所</div>
                    <div class="page-desc">AI智能助手、快速入口、推荐岗位、热门培训</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
        </div>
    </div>

    <div class="section">
        <div class="section-title">
            <i class="fas fa-umbrella-beach"></i> 荣军优享模块
        </div>
        <div class="page-grid">
            <a href="travel-home.html" class="page-card">
                <div class="page-preview">
                    <iframe src="travel-home.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">荣军优享首页</div>
                    <div class="page-desc">AI智能旅游助手、景点、酒店、活动</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
            <a href="ai-travel-form.html" class="page-card">
                <div class="page-preview">
                    <iframe src="ai-travel-form.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">AI行程制定</div>
                    <div class="page-desc">目的地、预算、时间、生成报价、分享拼团</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
            <a href="hotel-package-list.html" class="page-card">
                <div class="page-preview">
                    <iframe src="hotel-package-list.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">酒店套餐列表</div>
                    <div class="page-desc">展示优惠套餐，直接预订</div>
                    <span class="page-badge">P1</span>
                </div>
            </a>
            <a href="hotel-package-detail.html" class="page-card">
                <div class="page-preview">
                    <iframe src="hotel-package-detail.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">酒店套餐详情</div>
                    <div class="page-desc">套餐信息、价格、立即预订</div>
                </div>
            </a>
            <a href="travel-agent-list.html" class="page-card">
                <div class="page-preview">
                    <iframe src="travel-agent-list.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">景点查询</div>
                    <div class="page-desc">地区筛选、网格布局、优惠标识</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
            <a href="travel-agent-detail.html" class="page-card">
                <div class="page-preview">
                    <iframe src="travel-agent-detail.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">景点详情</div>
                    <div class="page-desc">详细信息、优惠信息、快速加入行程</div>
                </div>
            </a>
            <a href="activity-list.html" class="page-card">
                <div class="page-preview">
                    <iframe src="activity-list.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">活动列表</div>
                    <div class="page-desc">街道活动、自发活动、在线报名</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
            <a href="activity-detail.html" class="page-card">
                <div class="page-preview">
                    <iframe src="activity-detail.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">活动详情</div>
                    <div class="page-desc">详细信息、报名流程</div>
                </div>
            </a>
            <a href="activity-create.html" class="page-card">
                <div class="page-preview">
                    <iframe src="activity-create.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">发布活动</div>
                    <div class="page-desc">活动发布表单</div>
                    <span class="page-badge">P2</span>
                </div>
            </a>
        </div>
    </div>

    <div class="section">
        <div class="section-title">
            <i class="fas fa-briefcase"></i> 新阵线模块
        </div>
        <div class="page-grid">
            <a href="job-list.html" class="page-card">
                <div class="page-preview">
                    <iframe src="job-list.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">职位列表</div>
                    <div class="page-desc">筛选、搜索、职位卡片</div>
                    <span class="page-badge">P1</span>
                </div>
            </a>
            <a href="job-detail.html" class="page-card">
                <div class="page-preview">
                    <iframe src="job-detail.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">职位详情</div>
                    <div class="page-desc">详细信息、评价系统、投递</div>
                </div>
            </a>
            <a href="training-list.html" class="page-card">
                <div class="page-preview">
                    <iframe src="training-list.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">培训列表</div>
                    <div class="page-desc">课程展示、补贴信息、拼团</div>
                    <span class="page-badge">P1</span>
                </div>
            </a>
            <a href="training-detail.html" class="page-card">
                <div class="page-preview">
                    <iframe src="training-detail.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">培训详情</div>
                    <div class="page-desc">详细信息、补贴抵扣、拼团优惠</div>
                </div>
            </a>
            <a href="business-opportunity-list.html" class="page-card">
                <div class="page-preview">
                    <iframe src="business-opportunity-list.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">商机列表</div>
                    <div class="page-desc">商机卡片流、标签分类</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
            <a href="business-opportunity-detail.html" class="page-card">
                <div class="page-preview">
                    <iframe src="business-opportunity-detail.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">商机详情</div>
                    <div class="page-desc">详细信息、协作空间</div>
                </div>
            </a>
            <a href="comrade-tribe.html" class="page-card">
                <div class="page-preview">
                    <iframe src="comrade-tribe.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">战友部落</div>
                    <div class="page-desc">智能推荐、资源黄页、战友企业</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
        </div>
    </div>

    <div class="section">
        <div class="section-title">
            <i class="fas fa-user"></i> 个人中心 - 我的战位
        </div>
        <div class="page-grid">
            <a href="profile.html" class="page-card">
                <div class="page-preview">
                    <iframe src="profile.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">个人中心主页</div>
                    <div class="page-desc">积分展示、功能导航</div>
                </div>
            </a>
            <a href="profile-honor.html" class="page-card">
                <div class="page-preview">
                    <iframe src="profile-honor.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">荣誉权益中心</div>
                    <div class="page-desc">证书上传、积分展示、时间轴</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
            <a href="profile-participations.html" class="page-card">
                <div class="page-preview">
                    <iframe src="profile-participations.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">我的参与</div>
                    <div class="page-desc">旅游、酒店、活动参与记录</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
            <a href="profile-history.html" class="page-card">
                <div class="page-preview">
                    <iframe src="profile-history.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">历史记录</div>
                    <div class="page-desc">搜索筛选、时效提醒</div>
                </div>
            </a>
            <a href="profile-resume.html" class="page-card">
                <div class="page-preview">
                    <iframe src="profile-resume.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">简历中心</div>
                    <div class="page-desc">简历制作、AI优化、导出</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
            <a href="profile-jobs.html" class="page-card">
                <div class="page-preview">
                    <iframe src="profile-jobs.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">求职进度</div>
                    <div class="page-desc">时间轴可视化、面试管理</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
            <a href="profile-training.html" class="page-card">
                <div class="page-preview">
                    <iframe src="profile-training.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">我的培训</div>
                    <div class="page-desc">进度跟踪、证书管理、评价</div>
                    <span class="page-badge">P1</span>
                </div>
            </a>
            <a href="profile-posts.html" class="page-card">
                <div class="page-preview">
                    <iframe src="profile-posts.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">我的发布</div>
                    <div class="page-desc">发布内容管理、统计</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
        </div>
    </div>

    <div class="section">
        <div class="section-title">
            <i class="fas fa-robot"></i> AI功能
        </div>
        <div class="page-grid">
            <a href="ai-chat.html" class="page-card">
                <div class="page-preview">
                    <iframe src="ai-chat.html" loading="lazy"></iframe>
                    <div class="page-preview-loading">
                        <i class="fas fa-spinner"></i>
                        <span>加载中...</span>
                    </div>
                </div>
                <div class="page-info">
                    <div class="page-name">AI对话页面</div>
                    <div class="page-desc">智能问答、行程制定、服务推荐</div>
                    <span class="page-badge">P0</span>
                </div>
            </a>
        </div>
    </div>

    <div style="text-align: center; padding: 40px 0; color: var(--text-secondary);">
        <p>© 2024 战友部落 - 退役军人数字生态圈</p>
        <p style="margin-top: 10px; font-size: 12px;">所有页面原型基于PRD文档设计，采用TDesign设计规范</p>
    </div>

    <script>
        // 处理所有 iframe 的加载状态
        document.addEventListener('DOMContentLoaded', function() {
            const previews = document.querySelectorAll('.page-preview');
            
            previews.forEach(function(preview) {
                const iframe = preview.querySelector('iframe');
                if (!iframe) return;
                
                // 设置加载完成后的处理
                iframe.addEventListener('load', function() {
                    preview.classList.add('loaded');
                    // 延迟移除加载提示，让过渡更平滑
                    setTimeout(function() {
                        const loading = preview.querySelector('.page-preview-loading');
                        if (loading) {
                            loading.style.display = 'none';
                        }
                    }, 300);
                });
                
                // 如果 iframe 加载失败，也隐藏加载提示
                iframe.addEventListener('error', function() {
                    preview.classList.add('loaded');
                    const loading = preview.querySelector('.page-preview-loading');
                    if (loading) {
                        loading.innerHTML = '<i class="fas fa-exclamation-circle"></i> <span>加载失败</span>';
                        loading.style.color = '#ff6b00';
                    }
                });
            });
        });
    </script>
</body>
</html>
